@import url('https://fonts.googleapis.com/css2?family=Gothic+A1&display=swap');

body{
        font-family: "Space Grotesk", sans-serif;
        font-weight:300;
        margin:0;
        background-color:#F7F7F7;
      }
      
      p{
        text-align:left;
        font-size:16px;
      }
      
      a{
        color:#7d8fe8;
        text-decoration:none;
      }
      
      a:hover{
        color:#a8b4f0;
      }
      
      h1{
        font-family: "Space Grotesk", sans-serif;
        font-weight:700;
        font-size:20px;
        margin:0;
        padding:0;
        text-align:center;
      }
      
      h2{
        font-family: "Space Grotesk", sans-serif;
        font-weight:400;
        font-size:12px;
        margin:0;
        padding:0;
        text-align:center;
        color:#222222;
      }
      
      h3{
        font-family: "Space Grotesk", sans-serif;
        font-weight:700;
        text-align:left;
        font-size:14px;
      }
      
      h4{
        font-family: "Space Grotesk", sans-serif;
        font-weight:400;
        text-align:left;
        font-size:14px;
        color:#9a9a9a;
        text-transform:uppercase;
      }
      
      h5{
        font-family: "Space Grotesk", sans-serif;
        font-weight:300;
        text-align:center;
        font-size:14px;
        color:#666666;
        background-color:white;
        padding:8px 0;
        width:530px;
        margin-top:5px;
      }
      
      .logo{
        background-color:#ffff64;
        width:100%;
        height:20px;
        padding: 8px 0 12px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin:0;
      }
      .thisisstupid{
        /* THIS IS LOAD BEARING DON'T FUCK WITH IT */
        margin-left:-140px;
      }
      .i_prodigy {
        color:#000000;
        font-size:20px;
        
      }
      
      .header{
        height:285px;
        width:100%;
        z-index:0;
        position:absolute;
        background-color:gray; /* dont change this, i know it looks like a drop shadow but the image blurs into the background if its not this specific color */
        margin:0 auto;
      }
      
      .headerimg{
        height:285px;
        width:100%;
        z-index:-1111;
        position:absolute;
        background-color:#F7F7F7; 
        margin:0 auto;
      }
      
      .icon{
        text-align:center;
        margin:0 auto;
        background:transparent;
      }
      
      .icon img{
        position:relative;
        margin-bottom:35px;
        width:285px;
        height:285px;
        z-index:1;
        border-radius:50%;
        border:solid 2px white;
      }
      
      .content{
        position:relative;
        margin:0 auto;
        background:transparent;
        width:1000px;
        padding-bottom:50px;
        margin-top:50px;
        z-index:111111;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(1, 1fr);
        gap: 12px;
      }
      
      .about{
        width:390px;
        background:#ffffff;
        margin-top:30px;
        padding:16px;
      }
      
      .socials{
        width:390px;
        padding:6px 16px;
        background:transparent;
        text-align:center;
      }
      
      .socials p{
        text-align:center;
        font-family: "Space Grotesk", sans-serif;
        font-weight:300;
        font-size:12px;
        color:#222222;
      }
      
      .fb, .twt, .ig{
        font-family: "Space Grotesk", sans-serif;
        font-weight:300;
        padding: 6px 8px;
        font-size:16px;
        display:inline-block;
        color:#ffffff;
      }
      
      .popularsongs{
        margin-top:395px;
        width:530px;
        padding:0 16px;
      }
      
      .tracks{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(5, 1fr);
        gap: 10px;
        margin-top:-8px;
        margin-bottom:0;
      }
      
      .song{
        width:255px;
        height:75px;
        background:white;
        overflow:hidden;
        display:flex;
        align-items:center;
        justify-content: flex-start;
        opacity:1;
        transition: opacity 1.2s;
      }
      
      .song img{
        width:75px;
        height:75px;
        display:flex;
        align-items:flex-start;
        padding-right:8px;
      }
      
      .song strong{
        font-family: "Space Grotesk", sans-serif;
        font-weight:400;
        font-size:16px;
        color:#222222;
        text-align:left;
        line-height:16px !important;
      }
      
      .song p{
        font-family: "Space Grotesk", sans-serif;
        font-weight:400;
        font-size:12px;
        color:#222222;
        text-align:left;
        line-height:16px;
        margin-top:5px;
      }
      
      a, .song a{
        text-decoration:none;
      }
      
      .song:hover{
        opacity:.6;
      }
      
      .popularalbums{
        margin-top:44px;
        width:530px;
        padding:0 16px;
      }
      
      .lps{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(2, 1fr);
        gap: 15px;
        margin-top:-8px;
        margin-bottom:0;
      }
      
      .album{
        font-family: "Space Grotesk", sans-serif;
        font-weight:400;
        width:150px;
        height:188px;
        padding:4px;
        background:white;
        overflow:hidden;
        opacity:1;
        transition: opacity 1.2s;
      }
      
      .album img{
        width:150px;
        height:150px;
      }
      
      .album strong{
        font-family: "Space Grotesk", sans-serif;
        font-weight:400;
        font-size:12px;
        color:#000000;
        text-align:center;
        line-height:12px !important;
      }
      
      .album p{
        font-family: "Space Grotesk", sans-serif;
        font-weight:400;
        font-size:12px;
        color:#8b8b8b;
        text-align:center;
        line-height:16px;
        margin-top:5px;
        padding-bottom:4px;
      }
      
      a, .album a{
        text-decoration:none;
      }
      
      .album:hover{
        opacity:.6;
      }
      
      /* everything from here out i did in codepen thanks to random guy who made the popup and i do not claim to know how it works !!! i just know it does. */
      
      .click, .click a{
        font-family: "Space Grotesk", sans-serif;
        font-weight:300;
        text-align:center;
        font-size:14px;
        color:#666666;
        background-color:white;
        padding:8px 0;
        width:530px;
        margin-top:5px;
      	text-decoration:none;
        transition: opacity 1.2s;
      }
      
      .click:hover{
        opacity:.6;
      }
      
      .overlay {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, 0.7);
        transition: opacity 500ms;
        visibility: hidden;
        opacity: 0;
      	z-index:99999999999999;
      }
      .overlay:target {
        visibility: visible;
        opacity: 1;
      }
      
      .popup {
        margin: 20px auto;
        padding: 20px;
        background: #fff;
        width: 450px;
        height:600px;
        position: relative;
        transition: all 5s ease-in-out;
        overflow-y:auto;
      	z-index:99999999999999;
      }
      
      .popup h2 {
        margin-top: 0;
        color: #333;
        font-family: Tahoma, Arial, sans-serif;
      }
      .popup .close {
        position: absolute;
        top: 20px;
        right: 30px;
        transition: all 200ms;
        font-size: 30px;
        font-weight: bold;
        text-decoration: none;
        color: #333;
      }
      .popup .close:hover {
        color: #06D85F;
      }
      .popup .content {
        height:500px;
        overflow-y:auto;
      }
      
      @media screen and (max-width: 700px){
        .popup{
          width: 450px;
        }
      }
      
      .all{
        width:408px;
        height:57px;
        background-color:white;
      	padding: 8px 0;
      	display:flex;
        align-items:center;
        opacity:1;
        transition: opacity 1.2s;
      	overflow:hidden;
      	border-bottom:solid 1px #cccccc;
      }
      
      .all img{
      	width:57px;
      	height:57px;
      	padding-right:8px;
      	display:flex;
        align-items:flex-start;
      }
      
      .all strong{
        font-family: "Space Grotesk", sans-serif;
        font-weight:400;
        font-size:14px;
        color:#222222;
        text-align:left;
        line-height:14px !important;
      }
      
      .all p{
        font-family: "Space Grotesk", sans-serif;
        font-weight:400;
        font-size:11px;
        color:#222222;
        text-align:left;
        line-height:11px;
        margin-top:5px;
      }
      
      a, .all a{
        text-decoration:none;
      }
      
      .all:hover{
        opacity:.6;
      }